<template>
  <div class="note-list-container">
    <!-- 表格头部 -->
    <div class="table-header">
      <!-- 搜索条件 -->
      <div class="search-condition">
        <a-row>
          <div class="left-search">
            <a-col :span="4">
              <a-form-item
                label="手机号:"
                v-bind="formItemStyle"
              >
                <a-input-search 
                  v-model="searchParams.telephone"
                  allow-clear
                  @search="onQueryClk"
                  placeholder="请输入手机号查询" 
                  enter-button
                >
                </a-input-search>
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="时间选择:" style="margin-top: -3px;" v-bind="formItemStyle">
                <a-range-picker
                  :show-time="{ format: 'HH:mm' }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onChange"
                  @ok="onOk"
                />
              </a-form-item>
            </a-col>
          </div>
        </a-row>
        <!-- 操作区域 -->
        <div class="operation">
          <a-button type="primary" @click="handleBack">返回</a-button>
        </div>
      </div>
    </div>
    <!-- 表单内容 -->
    <div class="table-content">
      <a-table 
        :rowKey="(record) => record.dataIndex"
        :columns="columns" 
        :data-source="tableData"
        :loading="tableLoading"
        bordered
        :pagination="false"
      >
        <!-- <template slot="evaluationId" slot-scope="row">
          <a-tag :color="enumEvaluationId[row].color">
            {{ enumEvaluationId[row].label }}
          </a-tag>
        </template> -->

        <template slot="evaluationTime" slot-scope="row">
          {{ timeFilter(+row, '年月日时分') }}
        </template>
        <template slot="evaluationContent" slot-scope="row">
          <span style="word-break: break-all;">
            {{ row }}
          </span>
        </template>
      </a-table>
      <Pagination 
        class="pagination" 
        :loading.sync="tableLoading" 
        :tableData.sync="tableData"
        :searchCondition="searchParams" 
        :apiRequestCallback="apiRequest">
      </Pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/pagination/index.vue";
import { apiGueryReceiveSmsList } from '@/api/api.js'
const enumEvaluationId = {
  1: {
    label: '非常满意',
    color: '#87d068'
  },
  2: {
    label: '满意',
    color: '#108ee9'
  },
  3: {
    label: '不满意',
    color: '#f50'
  }
}
export default {
  name: 'NoteList',
  components: {
    Pagination
  },
  data() {
    this.formItemStyle = {
      labelCol: { span: 5 },
      wrapperCol: { span: 19 }
    }
    return {
      enumEvaluationId,
      tableLoading: false,
      tableData: [
        // {
        //   evaluationContent: '222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222',
        //   evaluationId: 1,
        //   evaluationTime: 1716964656230,
        //   telephone: "19958123031"
        // }
      ],
      // 搜索条件
      searchParams: {
        searchClk: 0,
        telephone: null,
        startTime: null,
        endTime: null,
      },
      apiRequest: apiGueryReceiveSmsList,
      columns: [
        // {
        //   title: '评价反馈',
        //   dataIndex: 'evaluationId',
        //   align: 'center',
        //   width: 100,
        //   scopedSlots: {
        //     customRender: 'evaluationId',
        //   }
        // },
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: '10%',
          customRender(text, record, index) {
            return index + 1
          }
        },
        {
          title: '短信接收时间',
          dataIndex: 'evaluationTime',
          align: 'center',
          width: '15%',
          key: 'evaluationTime',
          scopedSlots: {
            customRender: 'evaluationTime'
          },
        },
        {
          dataIndex: 'telephone',
          title: '手机号',
          align: 'center',
          width: '15%',
        },
        {
          title: '短信内容',
          dataIndex: 'evaluationContent',
          key: 'evaluationContent',
          scopedSlots: {
            customRender: 'evaluationContent'
          },
        }
      ],
    }
  },
  mounted() {
    this.onQueryClk()
  },
  methods: {
    onChange(data, dataStr) {
      this.searchParams.startTime = +data[0]
      this.searchParams.endTime = +data[1]
    },
    onOk(...args) {
      this.onQueryClk()
    },
    timeFilter(value, str) {
      let time = '';
      let date = new Date(value);
      let y = date.getFullYear();
      let M = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      switch (str) {
        case '年月日':
          time = y + '-' + M + '-' + d;
          break;
        case '年月日时分':
          time = y + '-' + (M < 10 ? '0' + M : M) + '-' + d + ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m)
      }
      return time;
    },
    onQueryClk(keepPage) {
      keepPage === true ? this.searchParams.searchClk -= 1 : this.searchParams.searchClk += 1
    },
    // 处理返回
    handleBack() {
      this.$router.push({
        name: 'Home'
      })
    }
  }
}
</script>
<style scoped lang="less">
.note-list-container {
  padding: 1rem;
  .search-condition {
    position: relative;
    .operation {
      position: absolute;
      top: 0;
      right: 20px;
    }
  }
}
</style>
